<template>
	<!-- 使用 textarea 实现多行输入自动换行 -->
	<textarea :value="value" :placeholder="placeholder" :autoHeight="true" @input="onInput" :disabled="disabled" :style="[p1]" class="auto-wrap-input"></textarea>
</template>

<script>
export default {
	name: 'AutoWrapInput',
	props: {
		// 双向绑定的输入值
		value: {
			type: String,
			default: ''
		},
		// 占位符
		placeholder: {
			type: String,
			default: '请输入内容'
		},
		disabled: {
			type: Boolean,
			default: false
		},
		color: {
			type: String,
			default: '#333'
		},
		size: {
			type: [String, Number],
			default: () => 28
		},
		weight: {
			type: [String, Number],
			default: '400'
		}
	},
	computed: {
		p1() {
			return {
				color: this.color,
				'font-size': this.size + 'rpx',
				'font-weight': this.weight
			};
		}
	},
	methods: {
		// 触发 input 事件，并传出当前输入值
		onInput(e) {
			this.$emit('input', e.detail.value);
		}
	}
};
</script>

<style scoped>
.auto-wrap-input {
	width: 100%;
	/* border: 1px solid #ccc; */
	padding: 20rpx 10rpx;
	/* font-size: 30rpx; */
	/* font-weight: 600; */
	box-sizing: border-box;
	/* 其他样式可根据需要调整 */
}
textarea::placeholder {
	color: #999;
	font-size: 20rpx;
	font-weight: 400;
}
</style>
